<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="天地图" />
    <link href="../../../../images/favicon.ico" type="image/x-icon" rel="Shortcut Icon" />
    <title>天地图－地图API－范例－车辆轨迹</title>
    <script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=e238e2cadb0e25caaca7463f25f0eac3"
        type="text/javascript"></script>
    <script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" charset="utf-8"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
    <script src="js/point.js"></script>
    <!-- <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js"></script> -->
</head>

<body>
    <div id="mapDiv" style="position:absolute;width:800px; height:900px"></div>
    <div style="position:absolute;left:820px;">
        <input type="button" value="开始" onClick="_CarTrack.start();" />
        <input type="button" value="暂停" onClick="_CarTrack.pause();" />
        <input type="button" value="结束" onClick="_CarTrack.stop();" />
    </div>
    <script>
        var tile = new T.TileLayer("http://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e238e2cadb0e25caaca7463f25f0eac3");
        var map = new T.Map("mapDiv", { layers: [tile] });
        // map.centerAndZoom(new T.LngLat(116.318090, 39.920270), 10)
        map.centerAndZoom(new T.LngLat(122.43976, 53.05087), 12)
        var _CarTrack = new T.CarTrack(map, {
            interval: 10,
            speed: 1,
            dynamicLine: true,
            polylinestyle: { color: "#2C64A7", weight: 5, opacity: 0.9 },
            Datas: datas.features.map(function (obj, i) {
                var coordinates = obj.geometry.coordinates;
                var lnlat = new T.LngLat(coordinates[0], coordinates[1]);
                return lnlat;

            }
            )
        })

    </script>

</body>

</html>